<template>
  <inline-Modal
    :visible="visible"
    title="不涉及项确认"
    :showOk="auth.approveNotContain"
    @ok="handelOk()"
    @cancel="handelCancel()"
  >
    <div class="not-involve-container">
      <a-form-model ref="ruleForm" :model="form">
        <div class="config-content">
          <div class="body">
            <div class="tree-container">
              <a-empty v-if="treeData.length == 0" />
              <a-tree
                v-else
                show-icon
                :default-expand-all="true"
                :expanded-keys="expandedKeys"
                :auto-expand-parent="autoExpandParent"
                :selected-keys="selectedKeys"
                :tree-data="treeData"
                @expand="onExpand"
                @select="onSelect"
                :replaceFields="{
                  children: 'childs',
                  title: 'evaluationName',
                  key: 'uuid',
                }"
              >
                <template slot="title" slot-scope="{ evaluationName }">
                  <div class="custom-tree-item flex" :title="evaluationName">
                    <div class="label">{{ evaluationName }}</div>
                  </div>
                </template>
                <!-- 文件夹图标 -->
                <template slot="custom" slot-scope="{ expanded, childs }">
                  <a-icon
                    :type="
                      childs && childs.length > 0
                        ? expanded
                          ? 'folder-open'
                          : 'folder'
                        : 'file'
                    "
                    :class="
                      childs && childs.length > 0 ? 'folder-icon' : 'file-icon'
                    "
                  />
                </template>
              </a-tree>
            </div>
            <div class="right-container">
              <div class="list">
                <vxe-table
                  ref="xTable"
                  height="99%"
                  align="center"
                  show-overflow
                  show-header-overflow
                  border="inner"
                  :data="tableData"
                  :column-config="{ resizable: true }"
                  size="small"
                  :loading="loading"
                >
                  <vxe-column type="seq" width="80" title="序号"></vxe-column>
                  <vxe-column field="assessmentContent" title="五级指标">
                  </vxe-column>
                  <vxe-column
                    v-if="auth.addNotContain"
                    field="methods"
                    title="审查资料及方式"
                  >
                  </vxe-column>
                  <vxe-column field="singleScore" title="总分"> </vxe-column>
                  <vxe-column field="responsibleSubjectDesc" title="责任主体">
                  </vxe-column>
                  <vxe-column title="专家确认">
                    <template #default="{ row }">
                      <a-radio-group
                        v-model="row.stateaValue"
                        v-if="auth.approveNotContain"
                        @change="remarkBlur(row)"
                      >
                        <a-radio :value="1"> 通过 </a-radio>
                        <a-radio :value="2"> 不通过 </a-radio>
                      </a-radio-group>
                      <div
                        v-else
                        class="status-td"
                        :class="row.status != 1 && 'no-pass'"
                      >
                        {{ row["statusDesc"] }}
                      </div>
                    </template>
                  </vxe-column>
                  <vxe-column title="专家意见">
                    <template #default="{ row }">
                      <a-input
                        v-if="auth.approveNotContain"
                        v-model="row.remarkValue"
                        placeholder="请输入"
                        @blur="remarkBlur(row)"
                      />
                      <span v-else>{{ row.remark }}</span>
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
              <!-- <div class="pager-container">
                <vxe-pager
                  size="small"
                  background
                  :current-page.sync="pager.page"
                  :page-size.sync="pager.pageSize"
                  :total="pager.total"
                  :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
                  :page-sizes="[20, 50, 100, 500]"
                  @page-change="paginationChange"
                >
                  <template #left>
                    <div class="vxe-pager-left-tip-container">
                      共<span>{{ pager.total }}</span
                      >条
                    </div>
                  </template>
                </vxe-pager>
              </div> -->
            </div>
          </div>
        </div>
      </a-form-model>
    </div>
  </inline-Modal>
</template>

<script>
import { addAttributeByKey } from "@/utils/index.js";
import { flatTreeData } from "@/utils/util";
import { axios } from "@/utils/request";
export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    soucre: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      auth: {
        approveNotContain: false,
        viewNotContain: false,
      },
      buttonLoading: false,
      form: {},
      //分页
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 999,
        total: 0,
      },
      checkRowKeys: [],
      //树
      expandedKeys: [],
      autoExpandParent: true,
      selectedKeys: [],
      treeData: [],
      treeId: "",
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getQEButtonAuth();
        }
      },
      immediate: true,
    },
  },
  methods: {
    //输入信息记录到缓存
    remarkBlur(row) {
      this.checkRowKeys.forEach((item) => {
        if (item.uuid == row.uuid) {
          item.stateaValue = row.stateaValue;
          item.remarkValue = row.remarkValue;
        }
      });
      localStorage.setItem(
        "SCORE_ROWKEY_RECORD",
        JSON.stringify(this.checkRowKeys)
      );
    },

    //查询按钮权限
    getQEButtonAuth() {
      let { tenantCode = "" } = this.$parent.condition;
      axios
        .get(`/probusiness/qeNew/buttonZjpfAuth?tenantCode=${tenantCode}`, {
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          this.auth = res?.data ?? {};
          this.getTreeData();
        })
        .catch((_) => {
          this.auth = {
            approveNotContain: false,
            viewNotContain: false,
          };
        });
    },
    //查询树结构
    getTreeData() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        let { tenantCode = "" } = this.$parent.condition;
        axios
          .get(
            `/probusiness/qeNew/getZJPFNotContainPJZBList?tenantCode=${tenantCode}`,
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let source = res?.data || [];
            this.treeData = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              source,
              "childs"
            );
            if (this.treeData.length > 0) {
              this.getFirstTreeNode();
            }

            resolve();
          })
          .catch((_) => {
            this.loading = false;
            this.treeData = [];
            reject();
          });
      });
    },
    //查询列表
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      return new Promise((resolve, reject) => {
        let { tenantCode = "" } = this.$parent.condition;
        axios
          .post(
            `/probusiness/qeNew/getZJPFNotContainContentList?pageNo=${page}&pageSize=${pageSize}&evaluationId=${this.treeId}&tenantCode=${tenantCode}`,
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.tableData = res.data?.rows || [];
            this.pager.total = res?.data.totalCount || 0;
            this.tableData.forEach((v) => {
              this.$set(v, "stateaValue", 1);
              this.$set(v, "remarkValue", v?.remark || "");
            });
            //记录数据
            this.tableData.forEach((v) => {
              if (
                this.checkRowKeys.map((item) => item.uuid).indexOf(v.uuid) == -1
              ) {
                this.checkRowKeys.push(v);
              }
            });
            let check =
              JSON.parse(localStorage.getItem("SCORE_ROWKEY_RECORD")) || [];
            if (check) {
              this.tableData.forEach((item) => {
                check.forEach((v) => {
                  if (item.uuid == v.uuid) {
                    item.stateaValue = v.stateaValue;
                    item.remarkValue = v.remarkValue;
                  }
                });
              });
            }
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //默认展开第一级节点
    getFirstTreeNode() {
      let { treeData } = this;
      let flatData = flatTreeData(treeData, "childs");
      let item = flatData.find((v) => !v.childs || v.childs.length == 0);
      this.expandedKeys = [item.uuid];
      this.selectedKeys = [item.uuid];
      this.treeId = item.uuid;
      this.pager.page = 1;
      this.getTableData();
    },

    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },

    onSelect(selectedKeys, event) {
      let { uuid } = event.node.dataRef;
      this.selectedKeys = selectedKeys;
      this.selectedKeys = [uuid];
      this.treeId = uuid;
      this.pager.page = 1;
      this.getTableData();
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    handelOk() {
      let that = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          that.$confirm({
            title: "提示",
            content: "您确定提交所选内容吗?",
            okText: "确定",
            cancelText: "取消",
            icon: () =>
              that.$createElement("a-icon", {
                props: {
                  key: "warning",
                  type: "exclamation-circle",
                  twoToneColor: "#faad14",
                },
              }),
            onOk() {
              let { tenantCode = "" } = that.$parent.condition;
              let config = [];
              that.checkRowKeys.forEach((v) => {
                config.push({
                  id: v.uuid,
                  status: v.stateaValue,
                  remark: v.remarkValue,
                });
              });
              let formJson = {
                qeNotcontainConfigs: config,
                tenantCode,
              };
              axios
                .post(`/probusiness/qeNew/submitNotContain`, formJson, {
                  headers: {
                    "Content-Type": "application/json",
                  },
                })
                .then((res) => {
                  if (res.statusCode === 200 || res === 1) {
                    that.$message.success("操作成功", 1.5);
                    that.getTableData();
                    that.$emit("ok");
                    that.resetForm();
                  } else {
                    that.$message.error(res.message);
                  }
                })
                .catch((_) => {});
            },
          });
        }
      });
    },
    handelCancel() {
      this.$emit("cancel");
      this.resetForm();
    },
    resetForm() {
      this.checkRowKeys = [];
      localStorage.removeItem("SCORE_ROWKEY_RECORD");
    },
  },
};
</script>

<style lang="less" scoped>
@primary-color: @primary-color;
.not-involve-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  /deep/.ant-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .config-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .search {
        margin: 0 0 10px 0;
        display: flex;
        .ant-select {
          width: 200px;
          margin-right: 16px;
        }
      }
      .body {
        flex: 1;
        display: flex;
        overflow: hidden;
        .tree-container {
          flex-shrink: 0;
          width: 342px;
          box-sizing: border-box;
          padding: 0 10px 0px 10px;
          border-right: 1px solid #f3f4f6;
          overflow: auto;
          position: relative;
          .button-group {
            display: flex;
            padding: 0px 10px 10px 10px;
            .button {
              cursor: pointer;
              flex: 1;
              height: 36px;
              background: #ffffff;
              border: 1px solid @primary-color;
              border-radius: 4px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 10px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: @primary-color;
              &:last-of-type {
                margin-right: 0;
              }
              &.checked {
                background: @primary-color;
                color: #ffffff;
              }
            }
          }
          .ant-tree {
            .ant-tree-node-content-wrapper {
              width: calc(100% - 34px);
              &.ant-tree-node-selected {
                background: #f5f7fc !important;
                color: @primary-color;
              }
              .folder-icon {
                color: #f5a623;
              }
              .file-icon {
                color: #54baff;
              }
              .ant-tree-title {
                width: calc(100% - 24px);
                display: inline-block;
                .custom-tree-item {
                  width: 100%;
                  height: 100%;
                  .label {
                    flex: 1;
                    overflow: hidden;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin-right: 10px;
                  }
                  .value {
                    color: #525a5d;
                    span {
                      color: @primary-color;
                    }
                  }
                }
              }
            }
          }
          .ant-empty {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .right-container {
          flex-shrink: 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          padding-left: 14px;
          .list {
            height: 100%;
            flex: 1;
          }
          .pager-container {
            flex-shrink: 0;
          }
        }
      }
    }
    .ant-form-item {
      display: flex;
      .ant-form-item-label {
        width: 130px;
        flex-shrink: 0;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
        textarea {
          height: 80px;
        }
        .ant-calendar-picker {
          width: 100%;
        }
      }
    }
  }
}
</style>
